<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>学生信息管理</title>
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <h1>新增学员</h1>
    <form class="info" autocomplete="off">
        姓名：<input type="text" class="uname" name="uname" />
        年龄：<input type="text" class="age" name="age" />
        性别:
        <select name="gender" class="gender">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        薪资：<input type="text" class="salary" name="salary" />
        就业城市：<select name="city" class="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="曹县">曹县</option>
        </select>
        <button class="add">录入</button>
    </form>

    <h1>就业榜</h1>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>薪资</th>
                <th>就业城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 
        <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> 
        -->
        </tbody>
    </table>
    <script>
        function render() {
            tbody.innerHTML = ''
            localStorage.setItem('data', JSON.stringify(data))
            for (let i = 0; i < data.length; i++) {
                const tr = document.createElement('tr')
                tr.innerHTML = `
                    <td>${data[i].id}</td>
                    <td>${data[i].name}</td>
                    <td>${data[i].age}</td>
                    <td>${data[i].gender}</td>
                    <td>${data[i].salary}</td>
                    <td>${data[i].city}</td>
                    <td>
                        <a href="javascript:" data-id='${i}'>删除</a>
                    </td>
                `
                tbody.appendChild(tr)
            }
        }

        const data = JSON.parse(localStorage.getItem('data')) || []
        // console.log(data);
        localStorage.setItem('data', JSON.stringify(data))
        //增加数据模块
        const info = document.querySelector('.info')
        const uname = document.querySelector('.uname')
        const age = document.querySelector('.age')
        const gender = document.querySelector('.gender')
        const salary = document.querySelector('.salary')
        const city = document.querySelector('.city')
        const tbody = document.querySelector('tbody')
        // console.log(localStorage.getItem('id'));
        let id = localStorage.getItem('id') || 1
        render()
        info.addEventListener('submit', function (e) {
            e.preventDefault()
            if (uname.value && age.value && gender.value && salary.value && city.value) {
                data.push({ id: id, name: uname.value, age: age.value, gender: gender.value, salary: salary.value, city: city.value })
                id++
                localStorage.setItem('id', id)
                this.reset()
                render()
            } else {
                alert("请输入正确数据")
            }
        })

        //点击删除模块
        tbody.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
                data.splice(e.target.dataset.id, 1);
                render()
            }
        })

    </script>

</body>

</html>